<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>抓拍人脸</span>
        <!-- 这里可以添加创建任务或其他操作的按钮 -->
      </div>
      <template>
        <div class="card-container">
          <div class="card" v-for="(item, index) in captureData" :key="item.id">
            <div class="card-header">
              <span>序号: {{ index + 1 }}</span>
            </div>
            <div class="card-content">

              <div class="card-image">
                <img :src="item.image" alt="Base64 Image" style="height: 250px;width: 250px">
              </div>
              <div class="card-info">
                <span>性别: {{ getGenderType(item.gender) }}</span>
              </div>
              <div class="card-info">
                <span>最小年龄: {{ item.minage }}</span>
              </div>
              <div class="card-info">
                <span>最大年龄: {{ item.maxage }}</span>
              </div>
              <div class="card-info">
                <span>抓拍时间: {{ item.date }}</span>
              </div>

            </div>

          </div>
        </div>
      </template>
      <!-- 分页组件 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageHelper.pageNum"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageHelper.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageHelper.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {stompClient} from "../../api/test/test";

export default {
  name: "FaceCapture",
  data() {
    return {
      formInline:{},
      captureData: [
        { gender: 'male' },
        { gender: 'female' } // 注意这里是正确的拼写
      ],
      currentPage: 1,
      pageSize: 10,
      total: 100, // 假设总共有100条抓拍记录
      pageHelper: {
        startDate:'',
        endData:'',
        total:0,
        pageNum:1,
        pageSize:5
      },
      base64Image:''
    };
  },
  methods: {

    handleDateRangeChange(value) {
      if (value) {
        this.listQuery.dateRange = value;
        // 可以在这里调用搜索方法或更新其他逻辑
      } else {
        this.listQuery.dateRange = [];
      }
    },
    // 添加日期格式化方法，如果需要
    formatDate(date) {
      const dt = new Date(date);
      return `${dt.getFullYear()}-${dt.getMonth() + 1}-${dt.getDate()}`;
    },
    handleFilter() {
      // 检查dateRange是否有值，如果有，则添加到搜索条件
      if (this.listQuery.dateRange && this.listQuery.dateRange.length === 2) {
        // 假设你有一个方法来格式化日期
        const startDate = this.formatDate(this.listQuery.dateRange[0]);
        const endDate = this.formatDate(this.listQuery.dateRange[1]);
        // 将格式化的日期添加到搜索条件中
        this.listQuery.startDate = startDate;
        this.listQuery.endDate = endDate;
      }
      // 调用搜索方法，传入当前的listQuery作为参数
      this.fetchData(this.listQuery);
    },
    getData()
    {
      stompClient(this.pageHelper).then(res=>{

        this.captureData = res.data.list;
        this.pageHelper.total = res.data.total;
       })

    },

    resetFilter() {
      this.listQuery.keyword = '';
      // 重置其他过滤条件
    },
    viewDetails(row) {
      // 查看抓拍详情的逻辑
    },
    handleSizeChange(val) {
      this.pageHelper.pageSize = val;
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageHelper.pageNum = val;
      this.getData()
    },
    getGenderType(gender) {
      return gender === 'male' ? '男' : (gender === 'female' ? '女' : '');
    }
  },
  created() {
    this.getData()
  }
};
</script>

<style scoped>
/* 您的样式定义 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #d8dce5;
}

.card {
  width: calc(20% - 10px); /* 每个卡片占据20%的宽度，减去左右外边距 */
  margin: 5px; /* 简化为统一的上下左右外边距，这里设置为5px */
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.card-header {
  background-color: #f8f8f8;
  padding: 10px;
  font-weight: bold;
}

.card-content {
  padding: 10px;
}

.card-info {
  margin-bottom: 10px;
  color: #001528;
}

.card-image img {
  width: 100%;
  height: auto;
  display: block;
}

.card-footer {
  text-align: right;
  padding: 10px;
}



</style>
